<template>
  <div class="containerRank">
    <my-navbar />
    <div class="zms">
      <div class="left">
        <div class="cloudMusic">
          云音乐特色榜
          <div
            @click="getCloudMusic(0, index)"
            v-for="(
              { name, coverImgUrl, updateFrequency }, index
            ) in CloudMusicArray"
            :key="index"
          >
            <div>
              <img :src="coverImgUrl" alt="" />
            </div>
            <div>
              <p>{{ name }}</p>
              <p>{{ updateFrequency }}</p>
            </div>
          </div>
        </div>
        <div class="WorldMusic">
          全球媒体榜
          <div
            @click="getCloudMusic(1, index)"
            v-for="(
              { name, coverImgUrl, updateFrequency }, index
            ) in WorldMusicArray"
            :key="index"
          >
            <div>
              <img :src="coverImgUrl" alt="" />
            </div>
            <div>
              <p>{{ name }}</p>
              <p>{{ updateFrequency }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="cloudNusicRight" >
          <div class="rightTop">
            <div class="img">
              <img :src="img" alt="" />
            </div>
            <div class="pp">
              <p>{{ name }}</p>
              <p>
                最近更新：{{
                  moment(updateTime).format("YYYY-MM-DD")
                }}(刚刚更新)
              </p>
              <p>
                <span>播放</span>
                <span>收藏：{{ subscribedCount }}</span>
                <span>转发</span>
                <span>下载</span>
                <span>评论</span>
              </p>
            </div>
          </div>
          <div class="rightBottom">
            <div class="div1">
              <span class="span1">歌曲列表</span>
              <span class="span2">{{ trackCount }}首歌</span>
              <span class="span3">播放：{{ playCount }}次</span>
            </div>
            <div class="div2">
              <span class="span1">标题</span>
              <span class="span2">时长</span>
              <span class="soan">歌手</span>
            </div>
            <table>
              <tbody>
                <tr v-for="(n, index) in tracks" :key="index">
                  <td class="td1">
                    {{ index + 1 }}&nbsp;&nbsp;<span
                      class="el-icon-video-play"
                    ></span
                    >{{ tracks[index].name }}
                  </td>
                  <td class="td2">
                    {{ moment(tracks[index].dt).format("mm:ss") }}
                  </td>
                  <td class="td3">{{ tracks[index].ar[0].name }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import myNavbar from "../components/myNavbar.vue";
export default {
  components: { myNavbar },
  data() {
    return {
      CloudMusicArray: null,
      WorldMusicArray: null,
      WorldMusicFlag: false,
      CloudMusicFlag: true,
      rightTop: null,
      img: null,
      name: null,
      updateTime: null,
      subscribedCount: null,
      trackCount: null,
      playCount: null,
      tracks: null,
      moment: moment,
    };
  },
  mounted() {
    this.getData();
 
  },
  methods: {
    //得到所有榜单内容
    getData() {
      const url = "toplist/detail";
      this.axios.get(url).then(res => {
        // console.log("toplist/detail:", res);
        var toplistDetailArray = res.data.list;
        //slice拆分数组
        this.CloudMusicArray = toplistDetailArray.slice(0, 4);
        this.WorldMusicArray = toplistDetailArray.slice(4);
        var rankData = JSON.parse(localStorage.getItem("rankData"));
        // console.log("tjb "+ rankData);
        if (rankData == null) {
          this.getCloudMusic(0, 0);
        } else {
          this.getCloudMusic(rankData.type, rankData.index);
        }
        // console.log("tjb "+idx);

      });
    },
    //得到具体榜单的内容
    getCloudMusic(type, index) {
      var a = this.CloudMusicArray[index];
      if (type == 1) {
        a = this.WorldMusicArray[index];
      }
      var rankData = {
          index: index,
          type: type
        }
      localStorage.setItem("rankData", JSON.stringify(rankData));

      // console.log("aaaa:" + this.CloudMusicArray[0]);
      const url = "playlist/detail?id=" + a.id;
      this.axios.get(url).then(res => {
        // console.log("getCloudMusic" + JSON.stringify(res));
        var rightTop = res.data.playlist;
        this.img = rightTop.coverImgUrl;
        this.name = rightTop.name;
        this.updateTime = rightTop.updateTime;
        this.subscribedCount = rightTop.subscribedCount;
        this.trackCount = rightTop.trackCount;
        this.playCount = rightTop.playCount;
        this.tracks = rightTop.tracks;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.containerRank {
  width: 80%;
  margin: 0 auto;
  .zms {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .left {
      width: 30%;
      border-right: 2px solid grey;
      .cloudMusic {
        margin-top: 50px;
        font-size: 17px;
        div {
          margin: 15px;
          display: flex;
          justify-content: space-between;
          div {
            width: 25%;
            img {
              width: 100%;
              height: 100px;
            }
          }
          div {
            width: 70%;
            display: block;
            p {
              font-size: 10px;
              margin-top: 10px;
              text-align: left;
            }
          }
        }
      }
      .WorldMusic {
        margin-top: 50px;
        font-size: 17px;
        div {
          margin: 15px;
          display: flex;
          justify-content: space-between;
          div {
            width: 25%;
            img {
              width: 100%;
              height: 100px;
            }
          }
          div {
            width: 70%;
            display: block;
            p {
              font-size: 10px;
              margin-top: 10px;
              text-align: left;
            }
          }
        }
      }
    }
    .right {
      width: 80%;
      margin: 0 auto;
      .cloudNusicRight {
        width: 100%;
        // margin: 15px;
        .rightTop {
          // background-color: pink;
          width: 85%;
          margin: 62px auto auto auto;
          display: flex;
          justify-content: space-between;
          .img {
            // width: 200px;
            // background-color: rgb(171, 211, 68);
            img {
              width: 200px;
              height: 200px;
            }
          }
          .pp {
            width: 70%;
            // background-color: red;
            display: block;
            padding-left: 30px;
            p {
              margin-top: 30px;
              // background-color: green;
              text-align: start;
              font-size: 15px;
            }
            span {
              display: inline;
              background-color: grey;
              padding: 5px;
              margin-right: 15px;
            }
          }
        }
        .rightBottom {
          // background-color: rgb(190, 113, 126);
          width: 85%;
          margin: 30px auto auto auto;
          .div1 {
            padding-bottom: 5px;
            border-bottom: 1px solid grey;
            span {
              // display: inline-block;
              font-size: 16px;
            }
            .span2 {
              margin: 0 350px 0 50px;
            }
          }
          .div2 {
            // padding-bottom: 5px;
            border-bottom: 1px solid grey;
            span {
              display: inline-block;
              border-right: 1px solid grey;
              padding: 5px;
            }
            .span1 {
              width: 280px;
              text-align: center;
            }
            .span2 {
              width: 70px;
              text-align: center;
            }
            .soan {
              width: 280px;
              border: 0;
              text-align: center;
            }
          }
          table {
            tr {
              td {
                display: inline-block;
                padding: 10px;
              }
              .td1 {
                width: 280px;
                padding-left: 15px;
                text-align: start;
              }
              .td2 {
                width: 70px;
                text-align: center;
              }
              .td3 {
                width: 280px;
                padding-left: 15px;
                text-align: start;
              }
            }
            tr:nth-child(2n) {
              background-color: rgb(179, 172, 172);
            }
          }
        }
      }
    }
  }
}
</style>
